<template>
  <div id="app">
    <el-container>
      <el-main>
        <!-- 三个图片 -->
        <div class="ordersS">
          <div class="orders">
            <img src="../../../static/order.png" alt="" srcset="">
            <div class="ordersLeft">
              <span>今日订单总数</span>
              <p>{{ floor.orders }}</p>
            </div>
          </div>
          <div class="orders">
            <img src="../../../static/amount.png" alt="" srcset="">
            <div class="ordersLeft">
              <span>今日销售总额</span>
              <p>￥{{ floor.saleSum }}</p>
            </div>
          </div>
          <div class="orders">
            <img src="../../../static/yesterdaynt.png" alt="" srcset="">
            <div class="ordersLeft">
              <span>昨日销售总额</span>
              <p>￥{{ floor.sale }}</p>
            </div>
          </div>
        </div>
        <!-- 待事件处理事务 -->
        <div class="affairs">
          <p style="background-color: rgb(242,246,251);"><span>待处理事务</span></p>
          <div class="affairsSum">
            <div class="affairsNum1">
              <div class="affairsNum1-1">
                <span> 待付款订单</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 待发货订单</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 已发货订单</span> <span style="color: red;">(10)</span>
              </div>
            </div>
            <div class="affairsNum1">
              <div class="affairsNum1-1">
                <span> 已完成订单</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 新缼货登记</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 待处理退货订单</span> <span style="color: red;">(10)</span>
              </div>
            </div>
            <div class="affairsNum1">
              <div class="affairsNum1-1">
                <span> 待确认收货订单</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 待处理退款申请</span> <span style="color: red;">(10)</span>
              </div>
              <div class="affairsNum1-1">
                <span> 广告位即将到期</span> <span style="color: red;">(10)</span>
              </div>
            </div>
          </div>
        </div>
        <section class="banner">
          <!-- 商品总览 -->
          <section class="commodity">
            <p style="background-color: rgb(242,246,251);"><span>商品总览</span></p>
            <!-- 再想想再用循环 -->
            <div class="commodityBottom">
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ ProductOverview[0] }}</p>
                <span>已下架</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ ProductOverview[1] }}</p>
                <span>已上架</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ ProductOverview[2] }}</p>
                <span>库存紧张</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ ProductOverview[3] }}</p>
                <span>全部商品</span>
              </div>
            </div>
          </section>
          <!-- 用户总览 -->
          <section class="commodity">
            <p style="background-color: rgb(242,246,251);"><span>商品总览</span></p>
            <!-- 再想想再用循环 -->
            <div class="commodityBottom">
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ UserOverview[0] }}</p>
                <span>今日新增</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ UserOverview[1] }}</p>
                <span>昨日新增</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ UserOverview[2] }}</p>
                <span>本月新增</span>
              </div>
              <div class="commodityBottom1">
                <p style="color:red;font-size: 20px;">{{ UserOverview[3] }}</p>
                <span>会员总数</span>
              </div>
            </div>
          </section>
          <!-- <section>
                <ve-line :data="chartData" :settings="chartSettings"></ve-line>
              </section> -->
        </section>
      </el-main>
      <el-footer>
        <div class="block">
          <el-date-picker v-model="value1" type="datetimerange" start-placeholder="2018-11-01" style="margin-left: 550px;"
            end-placeholder="2018-11-08" :default-time="['12:00:00']"  >
          </el-date-picker>
        </div>
        <ve-line :data="chartData" :settings="chartSettings" width="900px" :legend-visible="false"></ve-line>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {

    this.chartSettings = {
      area: true,
      scale: [true, true],
            xAxisType: 'time', //要标准的 年 月 日日期格式

      axisSite: {
        right: ['订单金额']
      },
      xAxis:{
        boundaryGap: ['0%', '0%'], 
      }
    }
    return {
      value1: '',
      floor: {},
      // text: ['今日订单总数',],
      //商品总览
      ProductOverview: [],
      //用户总览
      UserOverview: [],
      chartData: {
        columns: ['日期', '订单数量', '订单金额',],
        rows: [
          { '日期': '2018-11-02', '订单数量': 20, '订单金额': 2230, },
          { '日期': '2018-11-03', '订单数量': 33, '订单金额': 3623, },
          { '日期': '2018-11-04', '订单数量': 80, '订单金额': 8423, },
          { '日期': '2018-11-05', '订单数量': 60, '订单金额': 6423, },
          { '日期': '2018-11-06', '订单数量': 20, '订单金额': 3492, },
          { '日期': '2018-11-07', '订单数量': 60, '订单金额': 6123, }
        ]
      }

    }
  },
methods:{

},


  created() {
    this.$axios.get("/hello", {
    }).then((res, req) => {
      console.log(res.data.user);
      this.floor = res.data.user.find(o => o.id === 2)
      // console.log(this.floor, 'floor')
      this.ProductOverview = Object.values(res.data.user.find(o => o.id === 3))
      this.ProductOverview.splice(0, 1)
      this.UserOverview = Object.values(res.data.user.find(o => o.id === 4))
      this.UserOverview.splice(0, 1)
      console.log(this.ProductOverview, this.UserOverview)
    }).catch(err => {
      console.log(err, 'err')
    })
  },
 
}
</script>
<style lang="less" scoped>
#app {

  //三个图片
  .ordersS {
    width: 900px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .orders {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 200px;
      border: solid #eee thin;

      img {
        width: 50px;
      }

      .ordersLeft {
        margin-top: 30px;
        font-size: 11px;
        color: darkgrey;

        p {
          color: #000;
        }

      }
    }
  }

  //待处理事务
  .affairs {
    width: 950px;
    border: solid #eee thin;
    margin-bottom: 10px;

    p {
      height: 35px;
      line-height: 35px;

      span {
        margin-left: 20px;
      }
    }

    .affairsSum {
      display: flex;
      justify-content: space-around;

      .affairsNum1 {
        // margin-left: 40px;

        .affairsNum1-1 {
          width: 190px;
          display: flex;
          justify-content: space-between;
          border-bottom: solid #eee thin;
          margin-bottom: 20px;
        }
      }
    }
  }

  .banner {
    display: flex;
    width: 950px;
    justify-content: space-between;

    //商品总览
    .commodity {
      width: 400px;
      border: solid #eee thin;


      p {
        height: 35px;
        line-height: 35px;

        span {
          margin-left: 20px;
        }
      }

      .commodityBottom {
        display: flex;
        justify-content: space-around;

        .commodityBottom1 {
          text-align: center;

          p {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
</style>